<template>
  <view class="component-container">
    <view class="options">
      <view
        class="receiving-method"
        @click="changeReceivingMethod(ReceivingMethod.SHOP_EAT)"
        :class="{ active: receivingMethod === ReceivingMethod.SHOP_EAT }"
        v-if="supportedReceivingMethods?.includes(ReceivingMethod.SHOP_EAT)"
      >
        <span class="name">店食</span>
        <uni-icons custom-prefix="iconfont" type="icon-saoma" size="20" color="#747474"></uni-icons
      ></view>
      <view
        class="receiving-method"
        @click="changeReceivingMethod(ReceivingMethod.SELF_PICKUP)"
        :class="{ active: receivingMethod === ReceivingMethod.SELF_PICKUP }"
        v-if="supportedReceivingMethods?.includes(ReceivingMethod.SELF_PICKUP)"
        ><span class="name">自提</span><uni-icons custom-prefix="iconfont" type="icon-ziti" size="20"></uni-icons
      ></view>
      <view
        class="receiving-method"
        @click="changeReceivingMethod(ReceivingMethod.DELIVERY)"
        :class="{ active: receivingMethod === ReceivingMethod.DELIVERY }"
        v-if="supportedReceivingMethods?.includes(ReceivingMethod.DELIVERY)"
        ><span class="name">配送</span><uni-icons custom-prefix="iconfont" type="icon-songcan" size="20"></uni-icons>
      </view>
    </view>
    <view class="msg">
      {{ tis }}
    </view>
  </view>
</template>

<script setup lang="ts">
import { ReceivingMethod } from '@/enum/ReceivingMethod'
import $store from '@/store'
import { computed } from 'vue'

const props = defineProps({
  receivingMethod: {
    type: String
  },
  // 商家支持的送货方式
  supportedReceivingMethods: {
    type: Array as () => string[],
    default: [] as string[]
  }
})
const emits = defineEmits<{
  (e: 'update:receivingMethod', newVal: string): void
}>()

// 获取提示词
let tis = computed(() => {
  if (props.receivingMethod == null) return ''
  const seatNumber = $store.shop.seatNumber.getValue()
  const pre = seatNumber ? `已绑定座位(${$store.shop.seatNumber.getValue()})` : '但未绑定座位！'
  switch (props.receivingMethod) {
    case ReceivingMethod.SHOP_EAT:
      return `餐食会为您端送到指定座位,${pre}`
    case ReceivingMethod.SELF_PICKUP:
      return '下单后将自动为你分配取餐号，餐食制作好后您会收到提醒！'
    case ReceivingMethod.DELIVERY:
      return '下单后会分配骑手为您配送'
  }
  return ''
})
// 改变配送方式
function changeReceivingMethod(newReceivingMethod: string) {
  emits('update:receivingMethod', newReceivingMethod)
}
</script>

<style scoped lang="scss">
.component-container {
  padding-bottom: 20rpx;
  width: 100%;

  .options {
    display: flex;
    justify-content: flex-start;

    .receiving-method {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-right: 20rpx;
      padding: 20rpx 30rpx;
      height: 100rpx;
      font-weight: 700;
      border: 1px solid #c7c7c7;
      border-radius: 20rpx;
      flex-direction: column;
      background-color: #fff;

      .name {
        height: 40rpx;
        font-size: 27rpx;
        line-height: 40rpx;
      }
    }

    .active {
      border: 1px solid #fb7d06;
      background-color: #fef8e0;
    }
  }

  .msg {
    height: 50rpx;
    font-size: 25rpx;
    color: #7d7d7d;
    line-height: 50rpx;
  }
}
</style>
